<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./ife.css">
</head>

<body>
    <div class="header">
        <div class="center">
            <p class="logo">Logo</p>
            <li>
                <a href="#">Github</a>
                <a href="#">Register</a>
                <a href="#">Login</a>
            </li>
        </div>
    </div>
    <div class="banner clearfix">
        <li>
            <!-- right  float的逆序问题怎么解决？ -->
            <a href="#">4</a>
            <a href="#">3</a>
            <a href="#">2</a>
            <a href="#">1</a>
        </li>
    </div>
    <div class="nav">
        <div class="nav-box">
            <ul>
                <a href="#">
                    <li>HOME</li>
                </a>
                <a href="#">
                    <li>PROFILE</li>
                </a>
                <a href="#">
                    <li>ABOUT</li>
                </a>
            </ul>
        </div>
    </div>
    <div class="content clearfix">
        <!-- float是否可以继承？ -->
        <div class="line1">
            <div>This is Content 1</div>
            <div>MaybeContent 2</div>
            <div>Content 3</div>
        </div>
        <div class="line2">
            <div>Content 4</div>
            <div>Content 5</div>
            <div>Content 6</div>
            <div>Content 7</div>
        </div>
        <div class="line1">
            <div>Content 8</div>
            <div>Content 9</div>
            <div>Content 10</div>
        </div>
    </div>
    <div class="bottom">
        ©&nbsp;2018&nbsp;ife.baidu.com
    </div>
</body>

</html>